<template>
  <div class="content">
    <i class="iconfont icon-xiangzuojiantou" @click="back()"></i>
    <div class="tosearch">
      <i class="iconfont icon-fangdajing"></i>
      <div class="tosearch-keyword">
        <input type="text" class="tosearch-keyword-input" />
        <span class="keyword">{{ getThirdCtgy.thirdname }}</span>
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <i class="iconfont icon-iosgengduo_o"></i>
  </div>
</template>

<script setup lang="ts">
import FirstToThirdCtgy from "@/piniaviews/ctgy/service"
const {
  storeRefs: { getThirdCtgy },
  back,
} = FirstToThirdCtgy
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.content {
  @extend .multiplex-content;
  z-index: 2;
  .tosearch {
    @extend .multiplex-tosearch;
    .icon-fangdajing {
      font-size: 0.36rem;
      margin: 0 0.26rem;
    }
    &-keyword {
      display: grid;
      align-items: center;
      grid-template-columns: 3rem;
      color: #fff;

      .keyword,
      .icon-close,
      &-input {
        grid-row: 1/2; /* 网格行的起始网格线 / 网格行的结束网格线 */
        grid-column: 1/2; /* 网格列的起始网格线 / 网格列的结束网格线 */
      }
      &-input {
        height: 0.3rem;
        background: none;
        border: none;
      }
      .keyword {
        padding: 0.09rem 0.45rem 0.09rem 0.13rem;
        background-color: #838383;
        width: 0.7rem;
        border-radius: 1rem;
      }
      .icon-close {
        justify-self: flex-start;
        position: relative;
        left: 0.9rem;
      }
    }
  }
  .icon-xiangzuojiantou,
  .icon-iosgengduo_o {
    font-size: 0.32rem;
  }
}
</style>
